<template>

  <g  @contextmenu.stop="itemRightClick($event,stateDesc,isMainPage,name,'bileiqi')"
      :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')scale('+scale+')'" class="cursor-pointer"
  >
    <!-- 避雷器的 SVG 图形 -->
    <g transform="translate(30,0)">
      <line x1="100" y1="96" x2="123" y2="96" :style="{stroke:color,strokeWidth:2}"></line>
      <circle r="8" cx="128" cy="90" fill="none" :stroke-width="2" :stroke="color"/>
      <circle r="8" cx="140" cy="90" fill="none" :stroke-width="2" :stroke="color"/>
      <circle r="8" cx="128" cy="102" fill="none" :stroke-width="2" :stroke="color"/>
      <circle r="8" cx="140" cy="102" fill="none" :stroke-width="2" :stroke="color"/>
        <line x1="146" y1="96" x2="156" y2="96" :style="{stroke:color,strokeWidth:2}"></line>
        <line x1="156" y1="86" x2="156" y2="106" :style="{stroke:color,strokeWidth:2}"></line>
        <line x1="160" y1="90" x2="160" y2="102" :style="{stroke:color,strokeWidth:2}"></line>
        <line x1="164" y1="94" x2="164" y2="98" :style="{stroke:color,strokeWidth:2}"></line>
    </g>
  </g>
</template>

<script>
export default {
  name: "fourCircle",
  props: {
    translateX: { type: [Number,String], default: 0 },
    translateY: { type:  [Number,String], default: 0 },
    rotate: { type:  [Number,String], default: 0 },
    scale: { type:  [Number,String], default: 1 },
    name: { type: String, default: '' },
    stateDesc:{
      type: String,
      default: ""
    },
    color: { type: String, default: '#619fd2' },
    isMainPage:{
      type: Boolean,
      default: false


    },

  },
  methods: {
    itemRightClick(event,stateDesc,isMainPage,name,type) {
      event.preventDefault(); // 阻止默认的右键菜单弹出
      // 显示自定义右键菜单
      const {clientX, clientY} = event
      let params = {
        clientX,
        clientY,
        type,
        stateDesc,
        isMainPage,
        deviceName:name,
      }

      this.$emit('itemRightClick', params)
    },
  },
}
</script>

<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>
